
/* layim demo */

html{ color: #333; }
body{padding-bottom: 60px; overflow: auto;}
.layui-main{width: 1200px;}

.demo-banner{position: relative; height: 650px;}
.demo-logo,
.demo-main,
.demo-nav{position: absolute}
.demo-logo{top: 180px; left: 170px;}
.demo-main{right: 0; top: 20px;}
.demo-nav{left: 0px; top: 380px; border-left: 1px solid #B1B1B1; border-bottom: 1px solid #B1B1B1; font-size: 0;}
.demo-nav a{display: inline-block; vertical-align: top; *zoom: 1; *display: inline;}
.demo-nav a{position: relative; width: 130px; height: 50px; line-height: 50px; border: 1px solid #B1B1B1; border-left: none; border-bottom: none; font-size: 16px; font-weight: 300; text-align: center;}
.demo-nav a:hover{background-color: #E5E5E5; color: #000;}
.demo-nav .demo-this{background-color: #eee;}
.demo-nav a cite{font-size: 14px; padding-left: 3px; color: #01AAED;}
.banner-link{position: absolute; top: 460px; left: 0; text-align: center;}
.banner-link a{padding:0 15px; color: #666;}

.demo-title{text-align: center; margin-bottom: 10px;}
.demo-title fieldset{display: inline-block; width: 200px; border: none; border-top: 1px solid #B1B1B1; text-align: center;}
.demo-title fieldset legend{padding:0 30px; font-size: 20px; font-weight: 300;}

.demo-content{line-height: 24px; font-weight: 300;}
.demo-content a{color: #01AAED;}

.demo-get{margin: 50px 0; font-size: 0;}
.demo-get-list{display: inline-block; vertical-align: top; *zoom: 1; *display: inline;}
.demo-get-list{width: 260px; height: 302px; font-size: 14px;  border: 1px solid #B1B1B1; padding: 30px;}
.demo-get-pay{width: auto; margin: 0 65px; border: none; padding: 0; background-color: #fff;}
.demo-get-list p{text-align: center; font-weight: 300; font-size: 16px;}
.demo-get-list .demo-title{margin-top: 20px;}
.demo-get-list ul li{margin-left: 30px; line-height: 30px; font-weight: 300; list-style-type: disc;}

.demo-tab{ text-align: center;}
.demo-tab .demo-nav{position: relative; top: 0; display: inline-block;}
.demo-tab .demo-nav a{width: 100px; padding:0 10px; height: 40px; line-height: 40px; font-size: 14px;}
.demo-tab .demo-nav a:active{background-color: #E2E2E2;}
.demo-tab-content li{height: 610px; display: none;}
.demo-tab-content .demo-this{display: block;}

.demo-footer{margin-top: 200px; text-align: center}
.demo-footer p{font-weight: 300; font-size: 16px; color: #666; }
.demo-footer p a{padding: 0 10px;}

/* 适配 */
@media screen and (max-width: 750px) {
  .header,.layui-main,.demo-main,.demo-nav{display: none;}
  .demo-banner{width: auto; display: block; text-align: center;}
  .demo-banner:after{content: '请在电脑浏览器中打开'; position: absolute; top: 360px; left: 0; width: 100%; font-weight: 300; font-size: 16px; color: #666;}
  .demo-logo{left: 50%; width: 300px; margin-left: -150px;}
}

/* 好友查找 */

.layui-tab {
	position: relative;
	margin: 10px 0;
	width: 100%;
}

.layui-tab-title {
	position: relative;
	left: 0;
	font-size: 0;
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
	transition: all .3s;
	-webkit-transition: all .3s
}

.layui-tab-title:after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #ddd
}

.layui-tab-title li {
	font-size: 14px;
	transition: all .3s;
	-webkit-transition: all .3s;
	position: relative;
	z-index: 1;
	height: 40px;
	line-height: 40px;
	min-width: 65px;
	padding: 0 15px;
	text-align: center
}

.layui-tab-title li.layui-tab-this {
	color: #000
}

.layui-tab-title li.layui-tab-this:after {
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	width: 100%;
	height: 38px;
	border: 1px solid #ddd;
	border-bottom-color: #fff
}

.layui-tab-content {
	padding-top: 10px
}

.layui-tab-item {
	display: none
}

.layui-tab-scroll {
	padding: 0 21px
}

.layui-tab-bar span {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	width: 20px;
	line-height: 38px;
	text-align: center;
	border: 1px solid #ddd;
	background-color: #fff;
	color: #666;
	cursor: pointer
}

.layui-tab-bar .layui-tab-right {
	left: auto;
	right: 0
}

.layui-fixBlock {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 9999
}

.layui-fixBlock li {
	width: 50px;
	height: 50px;
	line-height: 50px;
	margin-bottom: 1px;
	text-align: center;
	cursor: pointer;
	font-size: 30px;
	background-color: #666;
	color: #fff;
	border-radius: 2px
}

.layui-fixBlock li:hover {
	opacity: .9
}

.layui-fixBlock li.layui-fixBlock-top {
	display: none;
	font-size: 40px
}

.layui-anim {
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.layui-anim.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.layui-anim.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.layui-anim.bounceIn,.layui-anim.bounceOut,.layui-anim.flipOutX,.layui-anim.flipOutY {
	-webkit-animation-duration: .75s;
	animation-duration: .75s
}

@-webkit-keyframes layui-slideInUp {
	from {
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0);
		visibility: visible
	}

	to {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}
}

@keyframes layui-slideInUp {
	from {
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0);
		visibility: visible
	}

	to {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}
}

.layui-anim-up {
	-webkit-animation-name: layui-slideInUp;
	animation-name: layui-slideInUp
}

.badge {
	display: inline-block;
	min-width: 10px;
	padding: 3px 7px;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: #999;
	border-radius: 2em
}

.badge:empty {
	display: none
}

.badge.bg-back,.badge.bg-mix {
	color: inherit
}
.bg-sub,.border-sub .button.active,.pointer.border-sub .active,.nav-pills.border-sub .active a,.nav-main.border-sub .nav-head,.pagination.border-sub .active {
	background-color: #0ae
}

@font-face {
	font-family:'FontAwesome';src:url('http://libs.baidu.com/fontawesome/4.1.0/fonts/fontawesome-webfont.eot?v=4.1.0');src:url('http://libs.baidu.com/fontawesome/4.1.0/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('http://libs.baidu.com/fontawesome/4.1.0/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'),url('http://libs.baidu.com/fontawesome/4.1.0/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),url('http://libs.baidu.com/fontawesome/4.1.0/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal
}[class*='icon-']:before {
	display: inline-block;
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	vertical-align: baseline;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.icon-plus:before {
	content: ""
}

.media-inline .media {
	display: inline-block;
	margin-right: 15px;
	margin-top: 0
}

.float-left {
    float: left!important;
}